Tipuri Avansate TypeScript: Stăpânirea Tiparelor Literale Template și Condiționale

Exemplu Internațional: Gestionarea Diferitelor Formate de Dată

Diferite regiuni ale lumii folosesc formate de dată diferite. Puteți utiliza tipuri condiționale pentru a gestiona aceste variații.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (Implementation would handle different date formats)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Invalid date format");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Access the year knowing it will be there

Acest exemplu utilizează tipuri condiționale pentru a defini funcții de analiză a datelor diferite, pe baza formatului de dată specificat. Tipul ParseDate asigură că obiectul returnat are proprietățile corecte pe baza formatului.

Combinarea Tipurilor Literale Template și Condiționale

Adevărata putere vine atunci când combinați tipurile literale template și tipurile condiționale. Acest lucru permite manipulări de tip incredibil de puternice.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Simplified for demonstration
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//Example function that takes a type
function processEvent(event: T): ExtractEventPayload {
    //In a real implementation, we would actually dispatch the event.
    console.log(`Processing event ${event}`);

    //In a real implementation, the payload would be based on event type.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Note that the return types are very specific:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//If you use other strings, you get never:
// const someOtherEvent = processEvent("someOtherEvent"); // Type is `never`

Cele Mai Bune Practici și Considerații

• Păstrează-l Simplu: Deși sunt puternice, aceste tipuri avansate pot deveni complexe rapid. Străduiește-te pentru claritate și menținere.
• Testează Temeinic: Asigură-te că definițiile tale de tip se comportă așa cum te aștepți, scriind teste unitare cuprinzătoare.
• Documentează-ți Codul: Documentează clar scopul și comportamentul tipurilor tale avansate pentru a îmbunătăți lizibilitatea codului.
• Ia în Considerare Performanța: Utilizarea excesivă a tipurilor avansate poate afecta timpul de compilare. Profilează-ți codul și optimizează acolo unde este necesar.